<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-07-25 10:25:43
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-07-26 16:57:28
 * @FilePath: \hd_ims_web\src\components\HdTagGroup\index.vue
 * @Description: 公用状态标志组、统一颜色标准
-->
<template>
  <div>
    <el-input
      v-model="value"
      readonly
      clearable
      :placeholder="placeholder"
      :type="multiple ? 'textarea' : 'text'"
      :disabled="disabled"
      style="width: 300px"
    >
      <el-button
        slot="append"
        icon="el-icon-plus"
        @click="clickAddButton"
      ></el-button>
    </el-input>
    <el-button
      v-if="multiple"
      icon="el-icon-plus"
      @click="clickAddButton"
    ></el-button>
    <!-- <el-select
      v-if="multiple"
      v-model="value"
      filterable
      multiple
      remote
      :value-key="keyName"
      clearable
      :placeholder="placeholder"
      :disabled="disabled"
      @change="changeZxpm"
      :remote-method="remoteMethod"
      :loading="loadingPmgg"
      style="width: 100%">
      <el-option v-for="item in optionsPmgg" :key="item.itmWldm" :label="item[keyName]" :value="item">
        <el-row>
          <el-col :span="8" style="text-overflow: ellipsis; overflow: hidden">
            {{ item.mjmMjbh }}
          </el-col>
          <el-col :span="8" style="text-overflow: ellipsis; overflow: hidden">
            {{ item.mjmMjmc }}
          </el-col>
          <el-col :span="8" style="text-overflow: ellipsis; overflow: hidden">
            {{ item.mjmMjgg }}
          </el-col>
        </el-row>
      </el-option>
    </el-select> -->
    <!-- 添加模具维修作业对话框 -->
    <el-dialog
      title="模具选择"
      v-model="openChild"
      :close-on-click-modal="false"
      draggable
      width="650px"
      append-to-body
    >
      <el-form ref="queryForm" :model="queryParamsChild" label-width="80px">
        <el-form-item label="筛选条件">
          <el-input
            v-model="queryParamsChild.mjmMjmc"
            clearable
            size="small"
            @input="clickAddButton"
          />
        </el-form-item>
      </el-form>
      <el-table
        highlight-current-row
        border
        stripe
        @scrollBottom="load"
        height="400"
        :data="ModelList"
        @row-click="clickRow"
        @row-dblclick="dbClickRow"
        @selection-change="handleSelectionMold"
        :header-cell-style="{ 'text-align': 'center' }"
        style="overflow: auto"
      >
        <el-table-column label="#" type="index" width="40" align="center" />
        <el-table-column
          v-if="multiple"
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          label="模具编号"
          :show-overflow-tooltip="true"
          align="center"
          prop="mjmMjbh"
        />
        <el-table-column
          label="模具名称"
          :show-overflow-tooltip="true"
          align="center"
          prop="mjmMjmc"
        />
        <el-table-column
          label="模具规格"
          :show-overflow-tooltip="true"
          width="150"
          align="center"
          prop="mjmMjgg"
        />
        <el-table-column
          label="模具吨位"
          :show-overflow-tooltip="true"
          width="80"
          align="center"
          prop="mjmDw"
        />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openChild = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getMjmByBhOrMc } from "@/api/project/mjmMstr";
export default {
  name: "HdSelectMould",
  props: {
    value: {
      type: [String, Array],
      default: "",
    },
    placeholder: {
      type: String,
      default: "请选择模具",
    },
    keyName: {
      type: String,
      default: "mjmMjbh",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      optionsPmgg: [],
      loadingPmgg: false,
      queryParamsChild: {
        pageNum: 1,
        pageSize: 25,
        mjmMjmc: null,
      },
      // 所有模具
      ModelList: [],
      totalAdd: 0,
      openChild: false,
      showSearch: false,
      selectionAddData: [],
      curRow: undefined,
    };
  },
  methods: {
    changeZxpm(val) {
      if (this.multiple) {
        this.$emit("input", val.map((a) => a[this.keyName]).join(","));
      } else {
        this.$emit("input", val[this.keyName]);
      }
      this.$emit("change", val);
    },
    //load
    load() {
      if (
        this.queryParamsChild.pageNum <
        Math.ceil(this.totalAdd / this.queryParamsChild.pageSize)
      ) {
        this.queryParamsChild.pageSize = 25;
        this.queryParamsChild.pageNum++;
        getMjmByBhOrMc(this.queryParamsChild).then((response) => {
          this.ModelList = this.ModelList.concat(response.rows);
          this.totalAdd = response.total;
        });
      }
      return 0;
    },
    /** 添加界面点击加号事件 */
    clickAddButton() {
      this.queryParamsChild.pageNum = 1;
      this.queryParamsChild.pageSize = 25;
      getMjmByBhOrMc(this.queryParamsChild).then((res) => {
        this.ModelList = res.rows;
        this.totalAdd = res.total;
      });
      this.openChild = true;
    },
    /** 表格点击事件 */
    handleSelectionMold(selection) {
      this.selectionAddData = selection;
    },
    /** 添加模具确认 */
    handleConfirmAdd() {
      if (this.multiple) {
        this.$emit(
          "input",
          this.selectionAddData.map((a) => a[this.keyName]).join(", ")
        );
      } else {
        this.$emit("input", this.curRow[this.keyName]);
      }
      this.$emit("change", this.curRow);
      this.openChild = false;
    },
    clickRow(row) {
      this.curRow = row;
      // this.$emit('input', row[this.keyName])
      // this.$emit('change', row)
    },
    dbClickRow(row) {
      this.$emit("input", row[this.keyName]);
      this.$emit("change", row);
      this.openChild = false;
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loadingPmgg = true;
        getMjmByBhOrMc(this.queryParamsChild).then((res) => {
          this.optionsPmgg = res.rows;
          this.loadingPmgg = false;
        });
      } else {
        this.optionsPmgg = [];
      }
    },
  },
};
</script>
<style lang="scss" module></style>
